<template>
  <div id="chart" style="width: 500px; height: 300px"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  const chartEl = document.getElementById('chart')
  if (!chartEl) return

  const chart = echarts.init(chartEl)
  const option = {
    title: {
      text: '接触折线图示例',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['系列1', '系列2'],
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '系列1',
        type: 'line',
        data: [10, 22, 35, 40, 56, 67, 78],
        smooth: true, // 平滑折线
      },
      {
        name: '系列2',
        type: 'line',
        data: [30, 45, 50, 60, 75, 85, 95],
        smooth: true,
      },
    ],
  }

  chart.setOption(option)
})
</script>
